<template>
  <div class="ready">

    <div class="na">
    <div class="nav">
         <img src="../assets/back.png" alt="">
         <p>文与字</p>
    </div>
    <div class="lun_img" v-for="(item,index) in xinwen" :key="index">
        <mt-swipe>
          <mt-swipe-item><img :src="item.avatar" alt=""></mt-swipe-item>
        </mt-swipe>
    </div>

    <div class="neirong">

    </div>
  </div>
  <tab-bar></tab-bar>
    
  </div>
</template>

<script>
import TabBar from '../common/TabBar'
import { Swipe, SwipeItem } from 'mint-ui';
import { news } from '@/api/api'
import http from '@/api/ajax'
export default {
  name: 'Ready',
  components:{
        TabBar:TabBar
    },
  data () {
    return {
       xinwen:[]
    }
  },
  created(){
    //  news().then(res=>{
    //    console.log("新闻消息",res)
    //  })
    http({
      url:'https://www.easy-mock.com/mock/5a9654e43d01940a2cdf9980/wechat/news',
       method:'get'
    }).then(res=>{
      console.log("新闻",res)
      this.xinwen=res.data
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.ready{
    height: 100vh;
    flex: 1;
    width:100%;
    // margin-top: 0.44rem;
    .nav{
      height: 0.44rem;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.18arem;
      background: #405f80;
      color: #fff;
      position: relative;
      position: fixed;
      left: 0;
      top:0;
      z-index: 99;
      img{
        height:0.17rem;
        width: 0.12rem;
        position: absolute;
        left: 0.18rem;
        top:50%;
        margin-top: -0.09rem;
      }
    }
    .lun_img{
      height: 2.8rem;
      img{
          height: 100%;
          width: 100%;
      }
    }
    .nerong{
      width: 100%;
      border-top:0.02rem solid #ededed;
      margin-top: 0.1rem;
      padding-top: 0.12rem;
    }
}


</style>
